<template>
  <div class="teaching-info">
    <div class="tab-header">
      <div class="tab-item active">教学信息</div>
      <div class="tab-item">资源信息</div>
      <div class="action-btn">在线批改答题</div>
    </div>
    
    <div class="table-container">
      <table class="info-table">
        <thead>
          <tr>
            <th>班级</th>
            <th>班主任</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>物理</th>
            <th>化学</th>
            <th>生物</th>
            <th>政治</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in classList" :key="index">
            <td>{{ item.className }}</td>
            <td>{{ item.headTeacher }}</td>
            <td v-for="(subject, subIndex) in subjects" :key="subIndex">
              <div class="setting-btn">设置</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="pagination">
      <span>共24条</span>
      <div class="page-btns">
        <div class="page-btn active">1</div>
        <div class="page-btn">2</div>
        <div class="page-btn">3</div>
        <div class="page-btn next">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TeachingInfo',
  data() {
    return {
      subjects: ['语文', '数学', '英语', '物理', '化学', '生物', '政治'],
      classList: [
        { className: '高一(2)班', headTeacher: '张三' },
        { className: '高一(3)班', headTeacher: '李四' },
        { className: '高一(4)班', headTeacher: '王五' },
        { className: '高一(5)班', headTeacher: '赵六' },
        { className: '高一(6)班', headTeacher: '冯七' }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.teaching-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .tab-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    
    .tab-item {
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #666;
      cursor: pointer;
      position: relative;
      
      &.active {
        color: #4cd4a7;
        font-weight: bold;
        
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: #4cd4a7;
        }
      }
    }
    
    .action-btn {
      margin-left: auto;
      padding: 0 15px;
      height: 32px;
      line-height: 32px;
      background-color: #4cd4a7;
      color: #fff;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  
  .table-container {
    flex: 1;
    overflow: auto;
    
    .info-table {
      width: 100%;
      border-collapse: collapse;
      
      th, td {
        padding: 12px 8px;
        text-align: center;
        border: 1px solid #eee;
      }
      
      th {
        background-color: #f5f5f5;
        font-weight: normal;
        color: #333;
      }
      
      td {
        color: #666;
        
        .setting-btn {
          display: inline-block;
          padding: 5px 10px;
          background-color: #e6f7f1;
          color: #4cd4a7;
          border-radius: 4px;
          cursor: pointer;
          font-size: 12px;
        }
      }
    }
  }
  
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 10px 0;
    
    span {
      color: #999;
      font-size: 14px;
      margin-right: 20px;
    }
    
    .page-btns {
      display: flex;
      align-items: center;
      
      .page-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eee;
        margin: 0 5px;
        cursor: pointer;
        color: #666;
        
        &.active {
          background-color: #4cd4a7;
          color: #fff;
          border-color: #4cd4a7;
        }
        
        &.next {
          font-size: 12px;
        }
      }
    }
  }
}
</style> 